// pages/songDetail/songDetail.js
import request from '../../utils/request'
import PubSub from 'pubsub-js'
import moment from 'moment'
// 获取全局实例
const appInstance = getApp()
Page({

    /**
     * 页面的初始数据
     */
    data: {
        isPlay: false, // 音乐是否播放
        // isPause: false, // 音乐是否暂停
        song: {}, // 歌曲详情对象
        musicId: '', // 音乐ids
        musicLink: '', // 音乐的链接
        currentTime: '00:00', // 实时时间
        durationTime: '00:00', // 总时长
        currentWidth: 0, // 实时进度条的总宽度
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // options用于接受路由跳转的query参数
        // 原生小程序中路由跳转，对参数的长度有限制，如果参数长度过长，会自动截取
        let musicId = options.musicId
        this.setData({
            musicId
        })
        // console.log(options);
        this.getMusicInfo(musicId)

        // 判断当前页面音乐是否在播放
        if(appInstance.globalData.isMusicPlay && appInstance.globalData.musicId === musicId) {
            // 修改当前页面音乐播放状态为true
            this.setData({
                isPlay: true
            })
        }

        // 当用户操作系统的控制音乐播放/暂停的按钮，页面不知道，导致页面显示是否播放的状态和真实的音乐播放状态不一样 为系统的控制按钮设置监听
        // 创建控制音乐播放的实例
        this.backgroundAudioManager = wx.getBackgroundAudioManager()
        // 监视音乐播放/暂停/停止
        this.backgroundAudioManager.onPlay(() => { // 播放
            // 修改isPlay的状态
            this.changePlayState(true)

            // 修改全局音乐播放的状态
            appInstance.globalData.musicId = musicId
        })
        this.backgroundAudioManager.onPause(() => { // 暂停
            // 修改isPlay的状态 修改全局音乐播放的状态
            this.changePlayState(false)
        })
        this.backgroundAudioManager.onStop(() => { // 停止
            // 修改全局音乐播放的状态
            this.changePlayState(false)
        })
        // 监听音乐播放自然结束
        this.backgroundAudioManager.onEnded(() => { // 停止
            // 自动切换至下一首音乐并自动播放
            PubSub.publish('switchType', 'next')
            // 将实时进度条的长度还原成0
            this.setData({
                currentTime: '00:00',
                currentWidth: 0
            })
            // 订阅切换的新音乐
            this.subscribeSong()
            // 订阅来自recommendSong页面发布的musicId消息
            // PubSub.subscribe('musicId', (msg, data) => {
            //     // console.log(data);
            //     // 获取音乐详情信息
            //     this.getMusicInfo(data)
            //     // 自动播放当前的音乐
            //     this.musicControl(true, data)
            //     // 取消订阅,在回调中订阅会一直触发，会不断累加，需要取消订阅
            //     PubSub.unsubscribe('musicId')
            // })
        })
        
        // 监听音乐实时播放的进度
        this.backgroundAudioManager.onTimeUpdate(() => {
            // 格式化实时的播放时间
            let currentTime = moment(this.backgroundAudioManager.currentTime * 1000).format('mm:ss')
            let currentWidth = this.backgroundAudioManager.currentTime / this.backgroundAudioManager.duration * 450
            this.setData({
                currentTime,
                currentWidth
            })
        })
    },
    // 修改isPlay的状态
    changePlayState(isPlay){
        this.setData({
            isPlay
        })

        // 修改全局音乐播放的状态
        appInstance.globalData.isMusicPlay = isPlay
    },
    // 点击播放/暂停的回调
    handleMusicPlay() {
        // 修改isPlay的状态
        let isPlay = !this.data.isPlay
        // this.setData({
        //     isPlay
        // })
        
        let {musicId, musicLink} = this.data
        this.musicControl(isPlay, musicId, musicLink)
    },
    // 获取音乐详情
    async getMusicInfo(musicId) {
        let songData = await request('/song/detail', {ids: musicId})
        // 音乐总时长 单位ms
        let durationTime = moment(songData.songs[0].dt).format('mm:ss')
        this.setData({
            song: songData.songs[0],
            durationTime
        })
        wx.setNavigationBarTitle({
          title: this.data.song.name,
        })
    },
    // 控制音乐播放/暂停的功能函数
    async musicControl(isPlay, musicId, musicLink) {
        if(isPlay) { // 音乐播放
            if (!musicLink) {
                // 获取音乐播放链接
                let musicLinkData = await request('/song/url', {id: musicId})
                musicLink = musicLinkData.data[0].url

                this.setData({
                    musicLink
                })
            }
           
            // 如果是vip的歌曲，会报invalid BackgroundAudioManager.src: null的错
            // console.log(musicLinkData);
            this.backgroundAudioManager.src = musicLink
            this.backgroundAudioManager.title = this.data.song.name
        } else { // 暂停音乐
            this.backgroundAudioManager.pause()
        }
    },
    // 点击切歌的回调
    handleSwitch(event) {
        // 获取切歌的类型
        let type = event.currentTarget.dataset.id
        // console.log(type)
        this.subscribeSong()

        // 发布消息数据给recommmendSong页面
        PubSub.publish('switchType', type)
    },
    // 订阅切换的新音乐
    subscribeSong() {
         // 订阅来自recommendSong页面发布的musicId消息
         PubSub.subscribe('musicId', (msg, data) => {
            // console.log(data);
            // 获取音乐详情信息
            this.getMusicInfo(data)
            // 自动播放当前的音乐
            this.musicControl(true, data)
            // 取消订阅,在回调中订阅会一直触发，会不断累加，需要取消订阅
            PubSub.unsubscribe('musicId')
        })
    },


    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})